/** */

<template>
  <Input
    :value="dataValue"
    @change="handleChange"
    :allow-clear="allowClear"
    :placeholder="placeholder"
  />
</template>

<script>
import { Input } from 'ant-design-vue'

export default {
  name: 'myInput4',
  components: {
    Input,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: [String, Number],
    allowClear: Boolean,
    placeholder: String,
  },
  watch: {
    value: {
      immediate: true,
      handler(value) {
        this.dataValue = value
      },
    },
    dataValue: {
      handler(value) {
        this.$emit('change', value)
      },
    },
  },
  data() {
    return {
      dataValue: undefined,
    }
  },
  methods: {
    handleChange(e) {
      const value = e.target.value
      this.dataValue = value
    },
  },
}
</script>

<style></style>
